<template>
  <view class="notification-item" @click="handleClick">
    <view class="notification-header">
      <view class="notification-title">
        <view class="unread-dot" v-if="notification.status === 'unread'"></view>
        {{ notification.title }}
      </view>
      <view class="notification-time">{{ notification.createTime }}</view>
    </view>
    <view class="notification-content">
      <up-text :lines="2" class="notification-text" :text="notification.content"></up-text>
    </view>
    <view class="notification-footer">
      <view class="notification-type" :class="typeClass">
        {{ typeText }}
      </view>
      <view class="notification-actions">
        <view class="notification-status" :class="statusClass">
          {{ statusText }}
        </view>
        <up-button 
          v-if="notification.status === 'unread'" 
          size="mini" 
          type="primary" 
          plain
          @click.stop="handleMarkRead"
        >
          标记已读
        </up-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';

defineOptions({ name: "NotificationItem" });

const props = defineProps({
  notification: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['click', 'markRead']);

// 处理点击事件
const handleClick = () => {
  emit('click', props.notification);
};

// 处理标记已读事件
const handleMarkRead = () => {
  emit('markRead', props.notification);
};

// 计算消息类型样式类
const typeClass = computed(() => {
  const classMap = {
    task: 'type-task',
    notice: 'type-notice',
    warning: 'type-warning',
    system: 'type-system'
  };
  return classMap[props.notification.type] || '';
});

// 计算消息类型文本
const typeText = computed(() => {
  const textMap = {
    task: '任务',
    notice: '通知',
    warning: '警告',
    system: '系统'
  };
  return textMap[props.notification.type] || '其他';
});

// 计算消息状态样式类
const statusClass = computed(() => {
  return props.notification.status === 'unread' ? 'status-unread' : 'status-read';
});

// 计算消息状态文本
const statusText = computed(() => {
  return props.notification.status === 'unread' ? '未读' : '已读';
});
</script>

<style scoped lang="scss">
.notification-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: relative;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.notification-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  display: flex;
  align-items: center;
  flex: 1;
}

.unread-dot {
  width: 12rpx;
  height: 12rpx;
  background-color: #f5222d;
  border-radius: 50%;
  margin-right: 12rpx;
  flex-shrink: 0;
}

.notification-time {
  font-size: 24rpx;
  color: #999999;
}

.notification-content {
  margin-bottom: 16rpx;
}

.notification-text {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.5;
}

.notification-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-actions {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.notification-type,
.notification-status {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}

.type-task {
  background-color: #e6f7ff;
  color: #1890ff;
}

.type-notice {
  background-color: #f6ffed;
  color: #52c41a;
}

.type-warning {
  background-color: #fff7e6;
  color: #fa8c16;
}

.type-system {
  background-color: #f0f0f0;
  color: #666666;
}

.status-unread {
  background-color: #f5222d;
  color: #ffffff;
}

.status-read {
  background-color: #f5f5f5;
  color: #999999;
}
</style>